<!DOCTYPE html>
<html ng-app="pmSearch">

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
		<title>PM2.5</title>
		<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body onload="init()">
		<header>
			<!--导航栏-->
			<h3 class="center text-center">PM2.5查询</h3>
		</header>
		<div id="scrollBar" ng-controller="CityIndex">
			<div style="width: 100%; height:80%;background-color: #000000; opacity: 0.3; border-radius: 5px; margin-top: 60px;" id="test1">
				<ul style="display: -webkit-flex;display: flex; -webkit-justify-content: space-around;justify-content: space-around;flex-direction: column;height: 100%; padding-top: 10px; padding-bottom: 10px;" id="scrollBarUl">
					<!--城市列表索引-->
					<li style="list-style: none; flex:1;height:auto;text-align: center; color: white; font-size: small;" ng-repeat="x in cityIndexs()" ng-bind="x"></li>
				</ul>
			</div>
		</div>
		<div class="container" style="margin-top: 50px;">
			<!--主体内容-->
			<div class="row">
				<form role="form">
					<div class="col-sm-12" style="margin-top: 10px;">
						<div class="input-group">
							<input type="text" class="form-control " placeholder="输入您要查询的城市名称">
							<span class="input-group-btn">
								<button class="btn btn-default" type="button">
									查询
								</button>
							</span>
						</div>
					</div>
				</form>
			</div>
			<div class="row" ng-controller="HotCity">
				<!--热门城市-->
				<div class="panel panel-default" style="margin: 15px 0; margin-left: 15px; margin-right: 50px;  padding-bottom: 15px;">
					<!-- Default panel contents -->
					<div class="panel-heading">热门城市</div>
					<div ng-repeat="hotCity in hotCitys" style="margin-top: 15px; height: 35px;" class="weightCenter">
						<a href="javascript:void(0);" style="width:33%; float:left;"><button class="btn btn-default" ng-bind="hotCity[0]" style="padding: 5px 25px;" onclick="ulrHtml(this)"></button></a>
						<a href="javascript:void(0);" style="width:33%; float:left;"><button class="btn btn-default" ng-bind="hotCity[1]" style="padding: 5px 25px; " onclick="ulrHtml(this) "></button></a>
						<a href="javascript:void(0);" style="width:33%; float:left; "><button class="btn btn-default " ng-bind="hotCity[2] " style="padding: 5px 25px;" onclick="ulrHtml(this)"></button>
						</a>
						<br />
					</div>
				</div>

			</div>
			<div class="row" ng-controller="AllCity" id="allCitys">
				<!--城市列表-->
				<ul>
					<li style="list-style: none;" ng-repeat="(cityIndex,cityName) in allCitys">
						<a id="{{cityIndex}}">
							<h4 ng-bind="cityIndex"></h4></a>
						<ul style="list-style: none; ">
							<li ng-repeat="city in cityName">
								<a href="javascript:void(0);" ng-bind="city" onclick="ulrHtml(this)"></a>
								<hr style="margin: 0;" />
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<script src="lib/jquery/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/angular/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/indexCtrl.js"></script>
	</body>

</html>